<template>
    <div style="border-radius: 10px">
        <image
            mode="aspectFill"
            src="https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg"
            style="border-radius: 10px 10px 0px 0px; width: 100%; height: 114px; object-fit: cover"
        />
        <div
            style="
                padding-left: 8px;
                padding-right: 8px;
                padding-bottom: 5px;
                background-color: white;
                border-radius: 0px 0px 10px 10px;
            "
        >
            <div style="padding: 8px">
                <div>
                    <text style="font-size: 18px; font-weight: bold; color: grey">{{ title }}</text>
                </div>
                <div style="height: 4px"></div>
                <div
                    style="
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                    "
                >
                    <text style="font-size: 11px">{{ time }}</text>
                    <div v-if="status === 1" class="label">进行中</div>
                    <div v-if="status === 0" class="label ended">已结束</div>
                    <div v-if="status === 2" class="label">立即预约</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { ref, defineProps } from 'vue'

const props = defineProps(['title', 'image', 'time', 'id', 'status'])
export default {
    props: ['title', 'activityImage', 'time', 'id', 'status'],
    setup(props) {
        console.log('activityImage', props.activityImage)
    }
}
</script>

<style scoped>
.label {
    width: 58.67px;
    height: 20.89px;
    line-height: 15px;
    border-radius: 4px;
    background-color: rgba(116, 184, 247, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 10px;
    text-align: center;
    font-family: Microsoft Yahei;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ended {
    background-color: rgba(102, 102, 102, 1);
}
</style>
